<template>
	<view class="">
		<view class="head">
			<u--form
					labelPosition="left"
					:model="form"
					:rules="rules"
					ref="uForm"
					labelWidth=75
			>
				<u-form-item
						label="姓名"
						prop="name"
						borderBottom
						ref="item1"
						class="inbt"
				>
						<u--input
								v-model="form.name"
								placeholder="请输入姓名"
								border="none"
						></u--input>
				</u-form-item>
				<u-form-item
						label="身份证号"
						prop="card_id"
						borderBottom
						ref="item1"
				>
					<u--input
							v-model="form.card_id"
							placeholder="请输入身份证号"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="手机号"
						prop="phone"
						borderBottom
						ref="item1"
				>
					<u--input
							v-model="form.phone"
							placeholder="请输入手机号"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="检药类型"
						prop="medicine"
						borderBottom
						ref="item1"
				>
					<u-radio-group
					    v-model="form.medicine"
					    placement="row"
					    @change="groupChange"
					  >
					    <u-radio
					      :customStyle="{marginBottom: '8px'}"
					      v-for="(i, index) in selecttype"
					      :key="index"
					      :label="i.name"
					      :name="i.name"
					      @change="radioChange(i)"
						  style="margin-left: 75rpx;"
					    >
					    </u-radio>
					  </u-radio-group>
				</u-form-item>
				<u-form-item
						label="联系人"
						prop="tname"
						borderBottom
						ref="item1"
				>
					<u--input
							v-model="form.tname"
							placeholder="请输入联系人"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="地区"
						prop="address"
						borderBottom
						ref="item1"
				>
					<u--input
							v-model="form.address"
							placeholder="请输入地区"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="详细地址"
						prop="fulladdress"
						borderBottom
						ref="item1"
				>
					<u--input
							v-model="form.fulladdress"
							placeholder="请输入详细地址"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="处方照片"
						prop="thisphoto"
						borderBottom
						ref="item1"
				>
					<u-avatar :src="form.url" shape="square" size="80" @click="photo"></u-avatar>
				</u-form-item>
			</u--form>
		</view>
		<view class="bottom">
			<u-button type="primary" text="提交" @click="sub"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			form:{
				name:'',
				card_id:'',
				phone:'',
				medicine:'',
				tname:'',
				address:'',
				fulladdress:'',
				url:''
			},
			medicine:null,
			disurl:'',
			rules: {
				// thisphoto:{
				// 	// min:1,
				// 	type: 'url',
				// 	required: true,
				// 	message: '请选择图片',
				// 	trigger: ['blur', 'change']
				// },
				name: {
					// min:1,
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				card_id: {
					// max:1,
					type: 'string',
					required: true,
					len:18,
					message: '身份证号位数不正确',
					trigger: ['blur', 'change']
				},
				phone: {
					type: 'string',
					required: true,
					len:11,
					message: '手机号位数不正确',
					trigger: ['blur', 'change']
				},
				medicine: {
					min:1,
					type: 'string',
					required: true,
					message: '请选择检药类型',
					trigger: ['blur', 'change']
				},
				tname: {
					type: 'string',
					required: true,
					message: '请填写联系人',
					trigger: ['blur', 'change']
				},
				address: {
					type: 'string',
					required: true,
					message: '请填写地址',
					trigger: ['blur', 'change']
				},
				fulladdress: {
					type: 'string',
					required: true,
					message: '请填写详细地址',
					trigger: ['blur', 'change']
				}
			},
			radiovalue:'',
			selecttype:[
				{
					name:'免煎颗粒',
					lable:'1'
				},
				{
					name:'中药饮片',
					lable:'2'
				}
			],
			showSex: false,
			model1: {
				userInfo: {
					name: '',
					sex: '',
				},
			},
			actions: [{
				name: '男',
				},
				{
					name: '女',
				},
				{
					name: '保密',
				},
			],
			radio: '',
			switchVal: false
		};
	},
	methods: {
		photo(){
			uni.chooseImage({
				count:1,
				sizeType:['compressed'],
				success: (res) => { 
					console.log(res)
					// uni.compressImage({
					// 	src:res.tempFilePaths[0],
					// 	quality:0,
					// 	success: (res) => {
					// 		console.log(res)
					this.form.url = this.disurl = res.tempFilePaths[0]
					// 	},
					// 	fail: (err) => {
					// 		console.log(err)
					// 	}
						
					// })
					console.log(this.form)
					// uni.saveImageToPhotosAlbum({
					// 	src:res.tempFilePaths,
					// 	success: (res) => {
					// 		console.log(res)
							
					// 	}
					// })
				}
			})
		},
		groupChange(e) {
			console.log(e)
			// this.form.medicine = e.name
		},
		radioChange(e) {
			console.log(e)
			this.form.medicine = e.name
			this.medicine = e.lable
		},
		sub() {
			console.log('出来了')
			this.$refs.uForm.validate().then(res => {
				if(!this.form.url) {
					this.$refs.uToast.show({
						type:'warning',
						message:'请上传图片'
					})
				} else {
					console.log(typeof(this.medicine));
					uni.uploadFile({
						url:'http://124.223.168.50:8000/test/medicine/',
						filePath:this.form.url,
						name:`disurl`,
						// header: {
						// 	'Content-Type': 'multipart/form-data'
						// },
						formData:{
							name:this.form.name,
							card_id:this.form.card_id,
							phone:this.form.phone,
							medicine:this.medicine,
							tname:this.form.tname,
							address:this.form.address,
							fulladdress:this.form.fulladdress,
							open_id:this.$store.state.open_id
						},
						timeout:10000,
						success: (res) => {
							if(res.statusCode === 200) {
								this.$refs.uToast.show({
									type:'success',
									message:'提交成功'
								})
								setTimeout(() => {
									uni.switchTab({
										url:'/pages/Home/Home',
									})
								},1000)
							} else {
								this.$refs.uToast.show({
									type:'warining',
									message:'提交失败'
								})
							}
							console.log(res)
						},
						fail: (err) => {
							console.log(err)
						},
						// complete: (r) => {
						// 	console.log(r)
						// }
					})
				}
			})
			// this.$refs.uForm.validate(res => {
			// 	console.log(res)
			// 	uni.uploadFile({
			// 		url:'http://192.168.0.48:8000/booking/zyg/',
			// 		file:this.form.url,
			// 		formData:this.form,
			// 		success: (res) => {
			// 			console.log(res)
			// 		}
			// 	})
			// }).then(res => {
			// 	console.log(res)
				// uni.uploadFile({
				// 	url:'http://192.168.0.48:8000/booking/zyg/',
				// 	file:this.form.url,
				// 	formData:this.form,
				// 	success: (res) => {
				// 		console.log(res)
				// 	}
				// })
				// if(this.form.url == '') {
				// 	this.$refs.uToast.show({
				// 		type:'warning',
				// 		message:'请先上传照片'
				// 	})
				// } else {
				// 	uni.uploadFile({
				// 		url:'http://192.168.0.48:8000/booking/zyg/',
				// 		file:this.form.url,
				// 		formData:this.form,
				// 		success: (res) => {
				// 			console.log(res)
				// 		}
				// 	})
				// 	console.log(this.form)
				// }
			// }).catch(err => {
			// 	console.log(err)
			// 	this.$refs.uToast.show({
			// 		type:'warning',
			// 		message:'请把信息填写完整'
			// 	})
			// })
		},
		sexSelect(e) {
			this.model1.userInfo.sex = e.name
		},
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	// this.$refs.uForm.setRules(this.rules)
    },
};
</script>
<style scoped>
	.bottom {
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
	}
	.head {
		width: 700rpx;
		margin: auto;
	}
	.uni-input-placeholder {
		/* float: left; */
		/* position: absolute; */
		/* z-index: 0; */
	}
	.inbt .int {
		/* float: left; */
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: 10048;
		/* outline: none; */
	}
	.int::placeholder {
		/* position: absolute; */
	}
	.inbt {
		position: relative;
	}
</style>
